<template>
	<view>
		<view class="prj_imgs" v-for="(item,index) in newArr" :key="index">
			<view class="prjdetail_title">
				<view class="prjdetail_titleleft">
					<image class="prjdetail_titleimage"
						src="http://106.14.56.171:15016/images/prjdetail/group_label.png" mode="">
					</image>
					<view> <text>{{item.date}}</text></view>
				</view>
			</view>
			<view class="prj_imgs_content">
				<view class="proiect-image" v-for="(it,ind) in item.subList" :key="ind" @click="clickImg(it)">
					<fileImage :src="it.filePath_T" :className="['prj_img_detail']" />
					<view class="video-icon" v-if="it.fileShow">
						<view>
							<uni-icons type="videocam" size="50" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				codeFile: '2', // 判断是否是环氧1是时环氧
				getImg: {},
				depot: [],
				newArr: [],
				aaa: false,
				photoValue: false, //播放视频
				videoContext: null
			}
		},
		components: {
			fileImage
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.getImg = option;
			console.log(this.getImg, 11111111111);
			// code为1的时候是环氧项目
			this.codeFile = option.code ? option.code : '2'
			this.getImgUrl()
		},
		methods: {
			getImgUrl() {
				let urlCode = ''
				if (this.codeFile == '1') {
					urlCode = `api/EpoxyProject/EpoxyProjectPlanImgsList?planId=${this.getImg.id}`
				} else {
					urlCode = `api/Project/ProjectImgsList?prjInfoId=${this.getImg.id}`
				}
				this.$http.get(urlCode).then((res) => {
					this.depot = res
					this.mapLoction(this.depot)

				})
			},
			async mapLoction(data) {
				let arrList = [];
				let arrObj = {};
				if (data && Array.isArray(data)) {
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						if (!item.createTime) {
							continue;
						}
						let dateStr = item.createTime.slice(0, 10);
						if (!arrObj[dateStr]) {
							arrObj[dateStr] = [];
						}
						arrObj[dateStr].push({
							fileShow: fileType(item.filePath_W),
							filePath_W: item.filePath_W,
							filePath_T: item.filePath_T,
							imgId: item.imgId
						});
					}
				}
				if (arrObj) {
					for (const arrObjKey in arrObj) {
						arrList.push({
							date: arrObjKey,
							subList: arrObj[arrObjKey],
						})
					}
				}
				if (!Array.isArray(arrList)) return
				for (let i = 0; i < arrList.length; i++) {
					await setTimeout(() => {
						this.newArr.push(arrList[i])
					}, i * 1000)
				}

				function fileType(code) {
					let num = -1
					let list = ['mp4', 'webm', 'ogg']
					list.forEach(item => {
						if (code.indexOf(item) != -1) {
							num++
						}
					})
					return num == -1 ? false : true
				}
				return arrList;
			},
			// 点击查看更多
			clickImg(index) {
				let userCode = CurrentRouter({})
				if (userCode) return
				uni.navigateTo({
					url: './imgPreview?name=图片' + '&arr=' + JSON.stringify(index) + '&id2=' + this.getImg.id +
						'&code=' + this.codeFile + '&prjName=' + this.getImg.prjName
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.proiect-image {
		position: relative;

		.video-icon {
			position: absolute;
			top: 0;
			z-index: 99;
			position: absolute;
			width: 211rpx;
			height: 211rpx;

			view {
				vertical-align: middle;
				display: table-cell;
				text-align: center;
				width: 211rpx;
				height: 211rpx;
				background-color: rgba(51, 51, 51, .6);
				border-radius: 10rpx;
			}
		}
	}
</style>
<style>
	.prjdetail_title {
		height: 60rpx;
		display: flex;
		width: 100%;
		align-items: center;
		flex-direction: row;

	}

	.prjdetail_titleleft {
		margin-left: 3.25%;
		width: 75%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.prjdetail_titleimage {
		width: 30rpx;
		height: 30rpx;
		margin-right: 3.25%;
	}

	.prjdetail_titleright {
		padding-right: 3%;
		display: flex;
		width: 25%;
		flex-direction: row;
		align-items: center;
	}

	.prj_imgs {
		background-color: #fff;
		margin-top: 10rpx;
	}

	.prj_imgs_content {
		display: flex;
		flex-wrap: wrap;
		margin-left: 44rpx;
		/* justify-content: space-between; */
		/* flex-direction: row; */
		/* align-items: center; */
		/* margin-left: 5%; */
		/* margin-right: 5%; */
		/* align-items: center; */
		/* flex-direction: row; */
		/* flex-wrap: wrap; */
	}

	.prj_imgs_content view {
		margin-right: 2%;
	}

	.prj_img_detail {
		width: 211rpx;
		height: 211rpx;
		/* margin-top: 10rpx; */
		/* margin-left: 2%; */
		margin-bottom: 30rpx;
		border-radius: 5px;
	}
</style>
